<template>
  <div class="songs clearfix">
    <div class="songs-left">
      <div class="songs-item">
        <div class="item-title dot">
          热门推荐
          <span class="more">
            <a href="">更多</a>
            <i class="cor"></i>
          </span>
        </div>
        <ul id="perlist" class="clearfix">
          <li v-for="(item, index) in tuiList" :key="index">
            <!-- 路由传参的方式 -->
            <!-- <router-link :to="`/detail?id=${item.id}&name=${item.name}`"> -->
            <img :src="item.picUrl" alt="" />
            <h3>{{ item.name }}</h3>
            <!-- </router-link> -->
          </li>
        </ul>
      </div>
      <div class="songs-item">
        <div class="item-title dot">
          新碟上架
          <span class="more">
            <a href="">更多</a>
            <i class="cor"></i>
          </span>
        </div>
        <div class="aluback">
          <a id="prevbtn"></a>
          <ul class="album clearfix">
            <li v-for="(item, index) in albumList" :key="index">
              <img :src="item.picUrl" alt="" />
              <p>
                <a href="javascript:;">{{ item.name }}</a>
              </p>
              <p>
                <a href="javascript:;">{{ item.artist.name }}</a>
              </p>
            </li>
          </ul>
          <a id="nextbtn"></a>
        </div>
      </div>
      <div class="songs-item">
        <div class="item-title dot">
          榜单
          <span class="more">
            <a href="">更多</a>
            <i class="cor"></i>
          </span>
        </div>
        <div class="toplist">
          <div class="toplist-item">
            <div class="top">
              <div class="top-left">
                <img src="../assets/img/biaosheng.jpg" alt="" />
              </div>
              <div class="top-right">
                <h3><a href="">飙升榜</a></h3>
                <div class="start">
                  <a href="" class="starton"></a>
                  <a href="" class="collet"></a>
                </div>
              </div>
            </div>
            <ol id="toplists">
              <li v-for="(item,index) in tracksData" :key="index">
                {{item}}
              </li>
            </ol>
          </div>
          <div class="toplist-item">
            <div class="top">
              <div class="top-left">
                <img src="../assets/img/newsong.jpg" alt="" />
              </div>
              <div class="top-right">
                <h3><a href="">新歌榜 </a></h3>
                <div class="start">
                  <a href="" class="starton"></a>
                  <a href="" class="collet"></a>
                </div>
              </div>
            </div>
            <ol id="toplists">
              <li v-for="(item,index) in tracksData" :key="index">
                {{item}}
              </li>
            </ol>
          </div>
          <div class="toplist-item">
            <div class="top">
              <div class="top-left">
                <img src="../assets/img/yuanchuang.jpg" alt="" />
              </div>
              <div class="top-right">
                <h3><a href="">原创榜</a></h3>
                <div class="start">
                  <a href="" class="starton"></a>
                  <a href="" class="collet"></a>
                </div>
              </div>
            </div>
            <ol id="toplists">
              <li v-for="(item,index) in tracksData" :key="index">
                {{item}}
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <div class="songs-right">
      <div class="myinfo">
        <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
        <a href="javascript:;" class="mybtn" @click="addModal = true"
          >用户登录</a
        >
      </div>
      <div class="zhubo">
        <h3>热门主播</h3>
        <ul id="zblist"></ul>
      </div>
    </div>
  </div>
  <modal-slot v-model:modelValue="addModal">
    <div class="tel-login">
      <div class="tel-input">
      <a href="javascript:;">
        <span>+86</span>
        <span><i></i></span>
      </a>
      <input type="tel" placeholder="请输入手机号">
      </div>
      <input type="text" placeholder="请输入验证码">
      <button @click="send">获取验证码</button>
      <div class="login-btn">
        <a href="javascript:;" class="login-btn-bg" @click="login">登录</a>
      </div>
    </div>
  </modal-slot>
</template>

<script>
import ModalSlot from "../components/modelSlot.vue";
export default {
  components: { ModalSlot },
  props: ["tuiList", "albumList","tracksData"],
  data() {
    return {
      addModal: false,
    };
  },
  methods: {
    login() {
      alert("登录");
    },
  },
};
</script>

<style>
</style>